<html>
    <head>
        <meta charset=UTF-8>
        <script src="../../src/tmlib.js"></script>
        <script>
            /**
             * Unit Circle(単位円) で三角関数を学ぼう!!
             */
            TM.using();
            TM.loadScript("graphics", "graphics");
            TM.loadScript("geom", "vector");
            TM.loadScript("input", "mouse");
            TM.loadScript("input", "keyboard");
            
            var UNIT_CIRCLE_RADIUS      = 250;  // 描画する単位円の半径
            var AXIS_LENGTH             = 350;  // 軸の長さ
            
            var g = null;       // グラフィック
            var m = null;       // マウス
            var k = null;       // キーボード
            var centerX = null;
            var centerY = null;
            
            TM.main(function(){
                // グラフィックセットアップ
                g = Graphics.Graphics();
                g.fullScreen();
                g.fillStyle = "black";
                g.strokeStyle = "black";
                centerX = g.centerX;
                centerY = g.centerY;

                document.body.appendChild(g.canvas);
                
                // マウスセットアップ
                m = $Mouse(g.canvas);
                m.run();
                
                // キーボードセットアップ
                k = $Key(document);
                k.run();
                
                setLoop(function(){
                    update();
                    draw();
                }, 30);
                
                // mouse 処理
                // クリックしながら移動すると矢印が追ってくる(単位ベクトル)
                // ミドルクリックしながら移動すると矢印の長さがマウスの位置になる.
            });
            
            var angle   = 45;
            var len     = 1;
            
            var update = function() {
                // 中心からマウス位置へのベクトル
                var vx = m.x - centerX;
                var vy = m.y - centerY;
                vy*=-1;
                
                // クリックすると矢印が追ってくる
                if (m.getButton($Mouse.BUTTON_LEFT)) {
                    angle = $V3(vx, vy, 0).toAngleXY()*180/Math.PI;
                }
                
                // ミドルクリック時のみ長さ変更可
                if (m.getButton($Mouse.BUTTON_MIDDLE)) {
                    centerX += m.dX;
                    centerY += m.dY;
                }
                
                // shift を押している間
                if (k.getKey( "ctrl" )) {
                    len = $V3(vx, vy, 0).length();
                }
                else {
                    len = UNIT_CIRCLE_RADIUS*1;
                }
                
                // -180 ~ 180 を 0 ~ 360 に変更
                angle += 360;
                angle %= 360;
                angle = angle.round();
                
                // shift を押している時は 10 step
                if (k.getKey( hotkeys.shift )) {
                    angle -= angle % 10
                }
            };
            
            
            var draw = function() {
                
                g.save();
                // 中央に移動
                g.translate(centerX, centerY);
                
                // 白でクリア
                g.clearWithColor("white");
                
                // X軸
                g.fillStyle = g.strokeStyle = "red";
                g.drawArrow(-AXIS_LENGTH, 0, AXIS_LENGTH, 0, 10);
                g.fillText("X", AXIS_LENGTH, 30);
                // Y軸
                g.fillStyle = g.strokeStyle = "green";
                g.drawArrow(0, AXIS_LENGTH, 0,-AXIS_LENGTH, 10);
                g.fillText("Y", 30, -AXIS_LENGTH);
                
                // 単位円描画
                g.strokeStyle = "black";
                g.strokeCircle(0, 0, UNIT_CIRCLE_RADIUS);
                
                // ベクトル描画
                g.save();
                g.scale(1, -1);
                
                var v = $V3().setFromDegree2D(angle, len);
                
                g.strokeStyle = "rgba(0, 0, 0, 0.1)";
                g.drawDashLine(v.x,   0, v.x, v.y, "1111000011110000");
                g.drawDashLine(  0, v.y, v.x, v.y, "1111000011110000");
                
                g.fillStyle = g.strokeStyle = "hsl({0}, 80%, 50%)".format(angle);
                g.drawLine(0, 0, v.x, v.y).fillCircle(v.x, v.y, 5);
                g.fillStyle = "hsla({0}, 80%, 50%, 0.5)".format(angle);
                g.fillTriangle(0, 0, v.x, 0, v.x, v.y);
                
                g.restore();
                
                // パラメータ表示
                g.font = "12px Consolas,'Lucida Console','DejaVu Sans Mono',monospace";
                g.fillStyle = "black";
                
                v.normalize();
                
                v.x = v.x.round(4); v.y = v.y.round(4);
                var text_list = [];
                var radian = angle*Math.PI/180;
                text_list.push( "x        : {0}".format(v.x.padding(8, ' ')) );
                text_list.push( "y        : {0}".format(v.y.padding(8, ' ')) );
                text_list.push( "angle    : {0}".format(angle.padding(8, ' ')) );
                text_list.push( "len      : {0}".format( (len/UNIT_CIRCLE_RADIUS).padding(8, ' ') ) );
                text_list.push( "sin({0}) : {1}".format(angle.padding(3, ' '), Math.sin(radian).floor(4).padding(8, ' ')) );
                text_list.push( "cos({0}) : {1}".format(angle.padding(3, ' '), Math.cos(radian).floor(4).padding(8, ' ')) );
                text_list.push( "tan({0}) : {1}".format(angle.padding(3, ' '), Math.tan(radian).floor(4).padding(8, ' ')) );
                
                g.fillTextList(text_list, 250, -300, 0, 0);
                
                g.restore();
            };
            
        </script>
    </head>
    <body>
        
    </body>
</html>